<style>
	.downLoadText {
		color: #958fe9;
		border: 1px solid#958fe9;
		border-radius: 40px;
		padding: 6px 30px;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}
</style>
<template>
	<div style="height: 100%;">

		<div style="background: #F6F6F6;margin-bottom: 10px;border-radius: 4px;">
			<el-row :gutter="20">
				<el-col :span="8">
					<div style="background: #fff;padding: 24px;border-radius: 8px;margin-top: 10px;height: 510px;">
						<div class="font15 color888">厂外运输车辆</div>

						<div style="display: flex;justify-content: space-between;height: 200px;">
							<div class="color555" style="padding-top: 40px;">
								<span class="color555" style="font-size: 28px;">{{data4.total}}</span>
								<span class="font14">车次</span>
							</div>
							<div>
								<div v-for="(item,index) in data4.list" :key="index" class="bgfff displayFlex mb20"
									style="padding-right: 80px;">
									<div
										style="width: 48px;line-height: 24px;background: #CBDFF8;border-radius: 12px;color: #1C3451;"
										class="font14 textCenter">{{item.name}}</div>

									<div class="ml10">
										<span class="font18" style="color: #1C3451;">{{item.num}}</span>
										<span class="font13 ">吨</span>
									</div>
								</div>
							</div>
						</div>

						<div id="chart1"
							style="width: 100%;height: 250px;background: linear-gradient(0deg, #FFFFFF, #F7F8FC);"></div>
					</div>
				</el-col>
				<el-col :span="8">
					<div style="background: #fff;padding: 24px;border-radius: 8px;margin-top: 10px;height: 510px;">
						<div class="font15 color888">厂内运输车辆</div>

						<div class="displayFlexBet mt40">
							<div class="color555">
								<span class="color555" style="font-size: 28px;">{{data2.total}}</span>
								<span class="font14">台</span>
							</div>
							<div>

							</div>
						</div>

						<div id="chart2" style="width: 100%;height: 350px;"></div>
					</div>
				</el-col>

				<el-col :span="8">
					<div style="background: #fff;padding: 24px;border-radius: 8px;margin-top: 10px;height: 510px;">
						<div class="font15 color888">非道路移动器械</div>

						<div style="display: flex;justify-content: space-between;height: 200px;">
							<div class="color555" style="padding-top: 40px;">
								<span class="color555" style="font-size: 28px;">{{data5.total}}</span>
								<span class="font14">台</span>
							</div>
							<div>
								<div v-for="(item,index) in data5.list" :key="index" class="bgfff displayFlex mb20"
									style="padding-right: 80px;">
									<div
										style="width: 48px;line-height: 24px;background: #CBDFF8;border-radius: 12px;color: #1C3451;"
										class="font14 textCenter">{{item.name}}</div>

									<div class="ml10">
										<span class="font18" style="color: #1C3451;">{{item.num}}</span>
										<span class="font13 ">台</span>
									</div>
								</div>
							</div>
						</div>

						<div id="chart3"
							style="width: 100%;height: 250px;background: linear-gradient(0deg, #FFFFFF, #F7F8FC);"></div>
					</div>
				</el-col>
			</el-row>
		</div>

		<div style="margin-top: 10px;">
			<div class="displayFlexBet bgfff bra8 font15 color555" style="padding: 10px 20px;">
				<div style="width: 40px;">编号</div>
				<div style="width: 200px;">时间</div>
				<div style="width: 150px;">进场/出场</div>
				<div style="width: 250px;">车牌</div>
				<div style="width: 150px;">排放标准</div>
				<div style="width: 250px;">运输货物</div>
				<div style="width: 250px;">运输量</div>
			</div>
			<div class="bgfff bra8 font15 color555 mt10" style="padding: 10px 20px;">
				<el-empty v-if="tableData.list.length == 0" style="margin: 0 auto;" />
				<div v-for="(item,index) in tableData.list" :key="index" class="displayFlexBet color555">
					<div style="width: 40px;border-bottom: 1px solid#F8F7F9;padding-bottom: 10px;padding-top: 10px;">
						{{item.receiptNo}}
					</div>
					<div style="width: 200px;">{{item.transportTime}}</div>
					<div style="width: 150px;">{{item.transportTypeStr}}</div>
					<div style="width: 250px;">{{item.vehicleNo}}</div>
					<div style="width: 150px;">{{item.emissionStandardStr}}</div>
					<div style="width: 250px;">{{item.goodsName || '--'}}</div>
					<div style="width: 250px;">{{item.goodsQty || '--'}}</div>
				</div>
			</div>

			<!-- <div>
				<el-table :data="tableData.list" style="width: 100%" size="mini" v-cloak>
					<el-table-column prop="receiptNo" label="编号">
					</el-table-column>
					<el-table-column prop="transportTime" label="时间">
					</el-table-column>

					<el-table-column prop="transportTypeStr" label="进场/出场">
					</el-table-column>
					<el-table-column prop="vehicleNo" label="车牌">
					</el-table-column>
					<el-table-column prop="emissionStandardStr" label="排放标准">
					</el-table-column>
				</el-table>
			</div> -->
			<div v-show="tableData.list&&tableData.list.length>0" align="right" style="margin-top: 10px">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page.sync="tableData.pageIndex" :page-sizes="[10,20,30,50]" :page-size="tableData.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
				</el-pagination>
			</div>
		</div>

	</div>
</template>

<script>
	import moment from 'moment'
	import * as echarts from 'echarts';


	let that
	export default {
		components: {},
		data() {
			return {
				params: {
					ticketId: '',
					startTime: moment().format('YYYY-MM-DD'),
					endTime: moment().format('YYYY-MM-DD'),
					vehicleNo: '',
					emissionStandard: ''
				},
				tableData: {
					total: 0,
					pageIndex: 1,
					pageSize: 20,
					list: []
				},

				data1: {
					list: []
				},
				data2: {},
				data3: {
					list: []
				},
				data4: [],
				data5: []
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.countGoods()
			that.countCarEmissionStandard()
			that.countMachineryCategory()
			that.countMachineryCategory2()
			that.countGoods2()
			that.getTableData()
		},
		methods: {

			countMachineryCategory2() {
				that.ajax({
					url: '/cleanTransportation/countMachineryCategory',
					contentType: 'application/json',
					data: JSON.stringify({

					}),
					success: function(data) {
						that.data5 = data.data
					},
				})
			},

			countGoods2() {
				that.ajax({
					url: '/cleanTransportation/countGoods',
					contentType: 'application/json',
					data: JSON.stringify({

					}),
					success: function(data) {
						that.data4 = data.data
					},
				})
			},

			countMachineryCategory() {
				that.ajax({
					url: 'cleanTransportation/countCarEmissionStandard',
					contentType: 'application/json',
					data: JSON.stringify({
						carCategory: "MOBILE_MACHINERY"
					}),
					success: function(data) {
						that.data3 = data.data

						let seriersData = []
						for (let item of data.data.list) {
							let _item = {
								value: item.num,
								name: item.name
							}
							seriersData.push(_item)
						}
						//console.log(seriersData, "sss")
						that.formChart("chart3", seriersData, "非道路移动器械", that.data3.percent)
					},
				})
			},

			countGoods() {
				that.ajax({
					url: 'cleanTransportation/countDoorEmissionStandardV2',
					contentType: 'application/json',
					data: JSON.stringify({
						carCategory: "OUTSIDE_CAR"
					}),
					success: function(data) {
						that.data1 = data.data

						let seriersData = []
						for (let item of data.data.list) {
							let _item = {
								value: item.num,
								name: item.name
							}
							seriersData.push(_item)
						}
						that.formChart("chart1", seriersData, "厂外运输车辆", that.data1.percent)
					},
				})
			},

			countCarEmissionStandard() {
				that.ajax({
					url: 'cleanTransportation/countCarEmissionStandard',
					contentType: 'application/json',
					data: JSON.stringify({
						carCategory: "INSIDE_CAR"
					}),
					success: function(data) {
						that.data2 = data.data

						let seriersData = []
						for (let item of data.data.list) {
							let _item = {
								value: item.num,
								name: item.name
							}
							seriersData.push(_item)
						}
						that.formChart2("chart2", seriersData, "厂内运输车辆", that.data2.percent)
					},
				})
			},

			search() {
				that.tableData.pageIndex = 1
				that.getTableData()
			},

			handleSizeChange: function(val) {
				that.tableData.pageIndex = 1;
				that.tableData.pageSize = val;
				that.getTableData();
			},

			handleCurrentChange: function(val) {
				that.tableData.pageIndex = val;
				that.getTableData();
			},


			getTableData() {
				let apiName = "cleanTransportation/pageCleanTransportation"

				that.ajax({
					url: apiName + '?ticketId=' + that.params
						.ticketId + '&pageIndex=' + that.tableData.pageIndex + '&pageSize=' + that
						.tableData.pageSize,
					data: JSON.stringify(that.params),
					contentType: 'application/json',
					dataType: 'json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.tableData.list = result.data.records;
							that.tableData.total = result.data.total;
						}
					},
				})
			},

			formChart2(chartId, seriesData, title = "入场", percent) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				let _title = "国四以上"
				if (chartId == 'chart1') _title = "国六以上"
				option = {
					tooltip: {
						trigger: 'item'
					},

					color: ['#04E38A', '#9DFF86', '#7C8DFF', '#8AD4F1', '#FFE689'],
					series: [{
						name: title,
						type: 'pie',
						radius: ['50%', '80%'],
						center: ['50%', '50%'],
						data: seriesData,
						label: {
							show: true, // show属性很关键 show为true时 初始化时即会展示默认文本；show为false时，只有在鼠标悬浮在块上时 才会展示相应文本
							position: 'center', // 文本展示位置
							formatter: () => { // 格式化要展示的文本
								return `{key|${percent}%}\n{length|${_title}}` // totalCount为自定义需要展示的属性 默认文本
							},
							rich: {
								//文本样式
								key: {
									fontSize: 25,
									fontFamily: "微软雅黑",
									color: '#454c5c',
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
								length: {
									fontFamily: "微软雅黑",
									fontSize: 16,
									color: '#6c7a89',
									lineHeight: 30,
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},

			formChart(chartId, seriesData, title = "入场", percent) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;


				let _title = "国四以上"
				if (chartId == 'chart1') _title = "国六以上"
				option = {
					tooltip: {
						trigger: 'item'
					},
					legend: {
						type: 'scroll',
						orient: 'vertical',
						right: '80',
						top: 'middle',
						icon: 'circle',
						show: seriesData.length ? true : false,
						formatter: function(name) { // 添加
							let total = 0
							let target
							for (let i = 0; i < seriesData.length; i++) {
								total += seriesData[i].value
								if (seriesData[i].name === name) {
									target = seriesData[i].value || 0
								}
							}
							var arr = [
								'{a|' + name + '}\n' + '{c|' + (target || '--') + '次}'
							]
							return arr.join('  ')
						},
						textStyle: { // 添加
							padding: [8, 0, 0, 0],
							rich: {
								a: {
									color: '#888',
									fontSize: 12,
									width: 110
								},
								c: {
									fontSize: 16,
									color: '#333',
									lineHeight: 30
								}
							}
						}
					},

					color: ['#04E38A', '#9DFF86', '#7C8DFF', '#8AD4F1', '#FFE689'],
					series: [{
						name: title,
						type: 'pie',
						radius: ['50%', '80%'],
						center: ['30%', '50%'],
						data: seriesData,
						label: {
							show: true, // show属性很关键 show为true时 初始化时即会展示默认文本；show为false时，只有在鼠标悬浮在块上时 才会展示相应文本
							position: 'center', // 文本展示位置
							formatter: () => { // 格式化要展示的文本
								return `{key|${percent}%}\n{length|${_title}}` // totalCount为自定义需要展示的属性 默认文本
							},
							rich: {
								//文本样式
								key: {
									fontSize: 25,
									fontFamily: "微软雅黑",
									color: '#454c5c',
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
								length: {
									fontFamily: "微软雅黑",
									fontSize: 16,
									color: '#6c7a89',
									lineHeight: 30,
									backgroundColor: "white" // 解决偶现文本重叠问题
								},
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selectedClass {
		color: #426ab3;
		font-weight: bold;
	}
</style>